<template>
  <!-- 定义布局容器 -->
  <el-container>
    <!-- 定义头标签 -->
    <el-header style="height: 60px;background-color: #000000;">
      <div>
        <span style="color: #ffffff;font-weight: bold;">南欧汽配之家</span>
      </div>
      <el-row>
        <i class="el-icon-question" style="font-size: 30px;padding-right: 20px;" @click="dialogVisible = true"></i>
        <el-button type="danger" round style="text-align: center;">退出登录</el-button>
      </el-row>
    </el-header>

<!-- 导航栏 -->
    <div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#303133"
          text-color="#fff"
          active-text-color="#FFE100"
          style="padding-left: 500px;background-color: #303133;"
          >
               <el-menu-item index="1" style="margin-right: 60px;font-size: 18px;" @click="tiaozhuan1"><i class="el-icon-s-home"></i>首页</el-menu-item>
               <el-menu-item index="2" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan2"><i class="el-icon-s-shop" ></i>购物中心</el-menu-item>
               <el-menu-item index="3" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan3"><i class="el-icon-s-opportunity"></i>车型查询</el-menu-item>
               <el-menu-item index="4" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan4"><i class="el-icon-s-claim"></i>关于我们</a></el-menu-item>
               <el-menu-item index="5" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan5"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
           </el-menu>
    </div>
    <!-- 定义中间区域-->
    <el-card class="box-card">
    <el-container>

      <el-aside :width="isCollapse ? '64px' : '200px' "style="background-color: white;border-right: #000000;">
        <!-- 这是左侧菜单-->
        <p style="color: #EE9900;padding-left: 18px;font-weight: bold;font-size: 23px;">个人中心</p>
        <el-menu
          background-color="white"
          text-color="#000"
          active-text-color="#4094ff"
          :collapse="isCollapse"
          :collapse-transition="isCollapseTransition" router
          style="margin-top: 20px;">
          <!-- 定义一级菜单  @click="defaultActiveMenu(menu.path)"  -->

        <!--   <el-menu-item :index="menu.id+''"  v-for="menu in menuList" :key="menu.id"
               @click="defaultActiveMenu(childrenMenu1.path)" sl>    :index="menu.id+''"-->

          <el-menu-item    :index="menu.path"    v-for="menu in menuList"    :key="menu.id"
           @click="defaultActiveMenu(menu.path)"  >
            <!-- 定义一级菜单模版 -->
            <template slot="title">
              <!-- 定义左侧图标-->
              <i :class="menuIcon[menu.id]"></i>
              <!-- 定义菜单名称-->
              <span style="font-size: 18px;">{{menu.name}}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

     <!-- 定义主页面结构-->
       <el-main style="width: 500px;">
         <!-- 定义路由展现页面-->
         <router-view></router-view>
       </el-main>

     </el-container>
 </el-card>
<TheFooter></TheFooter>
  </el-container>
</template>

<script>
import TheFooter from '../the/TheFooter.vue'
import TheHeader from '../the/TheHeader.vue'
export default {
  // 初始化函数
  created () {
    // 动态获取左侧菜单信息
    this.getMenuList()
    // 设定模式选中按钮
    this.defaultActive = window.sessionStorage.getItem('activeMenu')
  },
  data () {
    return {
      activeIndex2: '5',
      // 左侧菜单数据
      menuList: [],
      menuIcon: {
        1: 'el-icon-user-solid',
        2: 'el-icon-s-comment',
        3: 'el-icon-bell',
        4: 'el-icon-shopping-cart-full',
        5: 'el-icon-menu',
        6: 'el-icon-star-off'
      },

      // 定义是否折叠
      isCollapse: false,
      // 是否展现折叠动态效果
      isCollapseTransition: false,
      // 定义默认高亮
      defaultActive: ''
    }
  },
  components: {
    TheHeader,
    TheFooter
  },
  methods: {
    checks () {
      alert('asdfasdf')
    },
    tiaozhuan1 () {
      this.$router.push('/index')
    },
    tiaozhuan2 () {
      this.$router.push('/shopping')
    },
    tiaozhuan3 () {
      this.$router.push('/car')
    },
    tiaozhuan4 () {
      this.$router.push('/about')
    },
    tiaozhuan5 () {
      this.$router.push('/usernew')
    },
    logout () {
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      this.$router.push('/login')
    },
    async getMenuList () {
      const { data: result } = await this.$http.get('/me/getRightsList')
      if (result.status !== 200) return this.$message.error('左侧菜单查询失败')
      this.menuList = result.data

      console.log(result.data)
    },

    //  defaultActiveMenu(activeMenu){
    //    //为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
    //    if(activeMenu == null)return
    //    window.sessionStorage.setItem("activeMenu",activeMenu)
    //    this.defaultActive = activeMenu
    //  }

    defaultActiveMenu (activeMenu) {
      if (activeMenu == null) return

      // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
      window.sessionStorage.setItem('activeMenu', activeMenu)
      this.defaultActive = activeMenu
    }
  }
}
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
  .el-header {
    background-color: rgb(43,42,50);
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #FFFFFF; //设定字体颜色
    padding-left: 1px;
    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px; //设定字体高度
      }
    }
  }
  .el-aside {
    .el-menu {
      border-right: none;
    }
  }
  .el-main {
    // background-color: #EEEEEE;
    // background-image: url('../../assets/img/2.png') ;
  }

  .box-card {
      width: 1480px;
      margin: 0 auto;
      height: 900px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  .el-container {
    // background-color: #EEEEEE;
    // height: 100%;
    // background-image: url('../../assets/img/2.png');
  }

  .home-container {
    height: 100%;
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

  //定义折叠项
  .leftCollapse {
    //设定背景色
    background-color: black;
    //定义字体大小
    font-size: 10px;
    //定义行高
    line-height: 30px;
    //定义颜色
    color: #FFFFFF;
    //设置居中
    text-align: center;
    //设定字符间距
    letter-spacing: 4px;
    //鼠标放上之后设置为小手
    cursor: pointer;
  }

  .touxiang_box {
            height: 15px;
            width: 15px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 5px #ddd;
            position: absolute;
            left: 87%;
            background-color:#ddd ;
            img{
                width: 100%;
                height: 100%;
                border-radius: 100%;
                padding: auto;
            }
  }
  /deep/ .el-icon-arrow-down:before{
           color: white;
           // content: "\e6df";
           opacity: 1;
        }
</style>
